<template>
  <!-- 用户信息 -->
  <div class="module">
    <!-- 弹出登录 -->
    <Modal v-model="login" width="360">
      <p slot="header" style="text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>登录</span>
      </p>
      <p class="login-item">
        <Input v-model="loginForm.username" placeholder="请输入账号" style="width: 260px"/>
      </p>
      <p class="login-item">
        <Input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          style="width: 260px"
        />
      </p>
      <div slot="footer">
        <Button type="warning" size="large" :loading="loading" long @click="logins">提交</Button>
      </div>
    </Modal>

    <!-- 弹出注册 -->
    <Modal v-model="register" width="360">
      <p slot="header" style="text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>注册</span>
      </p>
      <p class="login-item">
        <Input v-model="reForm.username" placeholder="请输入账号" style="width: 260px"/>
      </p>
      <p class="login-item">
        <Input v-model="reForm.nickname" placeholder="请输入昵称" style="width: 260px"/>
      </p>
      <p class="login-item">
        <Input v-model="reForm.password" type="password" placeholder="请输入密码" style="width: 260px"/>
      </p>
      <p class="login-item">
        <Input v-model="reForm.email" placeholder="请输入邮箱" style="width: 260px"/>
      </p>
      <p class="login-item">
        <span></span>
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          style="display:inline-block;width:260px;border:0"
          :before-upload="startUp"
          type="drag"
        >
          <div style="padding: 20px 0;position:relative">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽上传图片</p>
            <div id="img-see" v-if="file">
              <img v-show="file" :src="global.serviceUrl + file" title="点击取消" @click.stop="cancel">
            </div>
          </div>
        </Upload>
      </p>
      <div slot="footer">
        <Button type="warning" size="large" :loading="loading" long @click="submit">提交</Button>
      </div>
    </Modal>

    <div id="userImg">
      <img v-if="userInfo.src" :src="global.serviceUrl + userInfo.src" alt>
      <img v-else src="static/default/default.png" alt>
    </div>
    <div id="login" v-show="!userInfo">
      <Row>
        <Col span="12">
          <span @click="login = true">登录</span>
        </Col>
        <Col span="12">
          <span @click="register = true">注册</span>
        </Col>
      </Row>
    </div>
    <div id="userInfo" v-show="userInfo">
      <div id="userAll">
        <span>
          <Icon type="ios-person-outline"/>
          {{ userInfo.nickname }}
        </span>
        <span>
          <Icon type="ios-mail-outline"/>
          {{ userInfo.email }}
        </span>
      </div>
      <Row>
        <Col span="8">
          <p class="user-num">{{ userInfo.collects }}</p>
          <p class="user-text">收藏</p>
        </Col>
        <Col span="8">
          <p class="user-num">{{ userInfo.comments }}</p>
          <p class="user-text">评论</p>
        </Col>
        <Col span="8">
          <p class="user-num">{{ userInfo.type }}</p>
          <p class="user-text">等级</p>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { login, uploads, register } from "@/config/api";
import { mapMutations, mapState } from "vuex";
export default {
  name: "User-box",
  data() {
    return {
      file: "", //头像
      loading: false,
      login: false,
      register: false,
      loginForm: {
        username: "", //账号
        password: "" //密码
      },
      reForm: {
        username: "", //账号
        password: "", //密码
        nickname: "", //昵称
        email: "" //邮箱
      }
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    ...mapMutations(["saveInfo"]),
    logins() {
      const $this = this;
      this.loading = true;
      login(this.loginForm.username, this.Md5(this.loginForm.password))
        .then(result => {
          if (result.data.status == "1") {
            this.loading = false;
            this.$Message.success("登陆成功！");
            this.login = false;
            const token = result.data.data[0];
            sessionStorage.setItem("token", JSON.stringify(token)); //存储用户数据
            this.saveInfo(token);
          } else {
            this.loading = false;
            this.$Message.error("登陆失败！");
          }
        })
        .catch(err => {
          this.loading = false;
          throw err;
        });
    },
    //上传图片
    startUp(file) {
      const $this = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        uploads(this.result, "users")
          .then(result => {
            if (result.data) {
              $this.$Message.success("上传成功！");
              $this.file = result.data;
            }
          })
          .catch(error => {
            $this.loadingImg = false; //关闭加载
            $this.$Message.error("上传失败！");
          });
      };
      return false;
    },
    cancel() {
      this.file = "";
    },
    submit() {
      const datas = this.reForm;
      register(
        datas.username,
        datas.nickname,
        this.Md5(datas.password),
        this.file,
        datas.email
      )
        .then(result => {
          if (result.data.status == "1") {
            this.loading = false;
            this.$Message.success("注册成功！");
            this.register = false;
          } else {
            this.loading = false;
            this.$Message.error(result.data.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          throw err;
        });
    }
  }
};
</script>
<style scoped>
.module {
  background-color: #fff;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}
#userImg {
  margin-top: 10px;
  text-align: center;
}
#userImg > img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
#userInfo {
  text-align: center;
}
.user-text {
  font-size: 12px;
  color: #515a6e;
  line-height: 30px;
}
.user-num {
  font-size: 16px;
  color: #17233d;
  cursor: pointer;
}
#userAll {
  padding: 10px 0;
  text-align: center;
}
#userAll > span {
  padding: 0 5px;
  font-size: 12px;
  color: #17233d;
}
#login {
  padding: 10px;
  text-align: center;
  font-size: 16px;
  color: #17233d;
}
#login span {
  cursor: pointer;
}
#login span:hover {
  font-weight: bold;
}
.login-item {
  text-align: center;
  padding: 10px 0;
}
#img-see {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#img-see > img {
  width: 100%;
  height: 100%;
}
</style>


